<template>
  <div>
    <!-- <h3>当前count的值: {{ count }}</h3> -->
    <h3>{{ showNum }}</h3>
    <button @click="substr1">-1</button>
    <button @click="substrN2">-3</button>

    <button @click="substrAsync1">异步-1</button>
    <button @click="substrAsyncN2">异步-3</button>
  </div>
</template>

<script>
// vuex 共享数据方式2：
import { mapState } from "vuex";
// 调用mutations事件的第二种方式
import { mapMutations } from "vuex";

// 从 vuex 中按需导入 mapActions 函数
import { mapActions } from "vuex";

// 获取getters中的数据方式2
import { mapGetters } from "vuex";

export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["count"]),
    ...mapGetters(["showNum"])
  },
  methods: {
    // 将mutations中定义的方法解构到当前组件中
    ...mapMutations(["substr", "substrN"]),

    //将actions定义的异步方法解构到当前方法中
    ...mapActions(["subAsync", "subNAsyncN"]),

    substr1() {
      this.substr();
    },
    substrN2() {
      // 直接调用mutations的方法
      this.substrN(3);
    },
    substrAsync1() {
      this.subAsync();
    },
    substrAsyncN2() {
      this.subNAsyncN(3);
    }
  }
};
</script>

<style lang="less" scoped></style>
